export default function(editor) {
  // panel 中需要用到的id
  const inputIFrameId = 'myscript_' + Math.ceil(Math.random() * 10)
  const btnOkId = 'myscript-btn' + Math.ceil(Math.random() * 10)

  //无用的标签
  const UN_TAGS = [ //转换成svg后只提取svg内容 去除没必要内容
    /<\/?mjx-container[^>]*>/gi,//去除标签保留内容
    /<\/?mjx-assistive-mml[^>]*>/gi,//去除标签保留内容
    /<math[^>]*>.*<\/math>/gi,//去除标签不保留内容
    /<mfrac[^>]*>.*<\/mfrac>/gi//去除标签不保留内容
  ]
  //引入MathJax将公式转换成svg格式
  if (!window.MathJax || !window.MathJax.version) {
    const script = document.createElement('script')
    script.src = 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-svg.min.js'
    script.async = true
    script.id = 'MathJax-script'
    document.head.appendChild(script)
  }

  const conf = {
    width: 900,
    height: 500,

    // panel 中可包含多个 tab
    tabs: [
      {
        // tab 的标题
        title: editor.i18next.t('menus.panelMenus.formula.手写公式'),
        // 模板
        tpl: `<div>
                  <iframe id="${inputIFrameId}" class="iframe" height="350px" width="100%" frameborder="0" scrolling="no" src="/static/myscriptMath/index.html"></iframe>
                  <div class="w-e-button-container">
                      <button id="${btnOkId}" class="right">
                          ${editor.i18next.t('确认插入')}
                      </button>
                  </div>
              </div>`,
        // 事件绑定
        events: [
          {
            selector: '#' + btnOkId,
            type: 'click',
            fn: () => {
              // 执行插入公式
              const node = document.getElementById(inputIFrameId)
              const latex = node.contentWindow.latex
             //输出转换svg
             let formula = window.MathJax.tex2svg(latex).outerHTML
              //去除无用的标签
              UN_TAGS.forEach(tags => {
                formula = formula.replace(tags, '')
              })
              //插入html
              editor.cmd.do('insertHTML', `&nbsp;${formula}&nbsp;`)
              
              // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
              return true
            }
          }
        ]
      } // tab end
    ] // tabs end
  }

  return conf
}
